/* 
(c) 2011 Lubomir Krupa, CC BY-ND 3.0
*/

$(document).ready(function(){
	var hoverEffect = true; // set true for hover effect, set false for no hover effect
    function reset(menu){
        menu.css({background:"none",
            color:"blue"
        })
    };
    function set(menu){
        menu.css({background:'#5487FF',
            color:"#fff"})
    }
	var numberOfScreens = 4; // set number of screens (1 or 2 or 3)
	var num = numberOfScreens;
		
	//if(hoverEffect){
	//	for(i=1;i<=num;i++){
	//		$('<style>#wrapper'+i+' div:hover{border: 1px #fff solid;box-shadow: 0px 0px 5px #fff;}</style>').appendTo('head');
	//	};
//	};
	
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var left1 = 0;
	var left2 = left1 - 1235;
	var left3 = left1 - 2460;
	var left4 = left1 - 3700;
	var wrapperTop =1;
	
	$('#place').css({'left':left1,'top':wrapperTop});
	var wrapperPos = 1;
	$('#place').css({'height':windowHeight-60});
	$('#wrapper1 input:text').focus();
	var animDone = true;
	
	function anim1to2(){
        reset($("#giaitri"));
        reset($("#thethao"));
        set($("#congnghe"));
        reset($("#phapluat"));
		$('#wrapper1 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left2
		},1000,'circEaseOut',function() {
			$('#wrapper2 input:text').focus();
			animDone = true;
			wrapperPos = 2;
		});
		$('#button1to2').hide();			
		$('#button2to1').show();
		$('#button2to1').css({'left':1250});
		if(num>2){
			$('#button2to3').show();
			$('#button3to2').hide();
		};
	};
	
	function anim2to1(){
        reset($("#giaitri"));
        set($("#thethao"));
        reset($("#congnghe"));
        reset($("#phapluat"));
		$('#wrapper2 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left1
		},1000,'circEaseOut',function() {
			$('#wrapper1 input:text').focus();
			animDone = true;
			wrapperPos = 1;
		});
		$('#button1to2').show();			
		$('#button2to1').hide();
		if(num>2){
			$('#button2to3').hide();
			$('#button3to2').hide();
		};		
	};
	
	function anim2to3(){
        set($("#giaitri"));
        reset($("#thethao"));
        reset($("#congnghe"));
        reset($("#phapluat"));
		$('#wrapper2 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left3
		},1000,'circEaseOut',function() {
			$('#wrapper3 input:text').focus();
			animDone = true;
			wrapperPos = 3;
		});
        $('#button3to2').css({'left':2470});
		$('#button1to2').hide();
		$('#button3to2').show();
        $('#button3to4').show();
		$('#button2to1').hide();
		$('#button2to3').hide();	
	};
	
	function anim3to2(){
        reset($("#giaitri"));
        reset($("#thethao"));
        set($("#congnghe"));
        reset($("#phapluat"));
		$('#wrapper3 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left2
		},1000,'circEaseOut',function() {
			$('#wrapper2 input:text').focus();
			animDone = true;
			wrapperPos = 2;
		});
		$('#button1to2').hide();
		$('#button3to2').hide();
		$('#button2to1').show();
		$('#button2to3').show();			
	};
	function anim3to4(){
        reset($("#giaitri"));
        reset($("#thethao"));
        reset($("#congnghe"));
        set($("#phapluat"));
		$('#wrapper3 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left4
		},1000,'circEaseOut',function() {
			$('#wrapper4 input:text').focus();
			animDone = true;
			wrapperPos = 4;
		});
        $('#button4to3').css({'left':3755});
		$('#button1to2').hide();
		$('#button4to3').show();
		$('#button2to1').hide();
		$('#button2to3').hide();
		$('#button3to4').hide();
		$('#button3to2').hide();	
	};
	
	function anim4to3(){
        set($("#giaitri"));
        reset($("#thethao"));
        reset($("#congnghe"));
        reset($("#phapluat"));
		$('#wrapper4 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left3
		},1000,'circEaseOut',function() {
			$('#wrapper3 input:text').focus();
			animDone = true;
			wrapperPos = 3;
		});
		$('#button1to2').hide();
		$('#button3to2').hide();
		$('#button3to4').show();
		$('#button3to2').show();
	};
	if(num>1){
		$('#button1to2').click(function(){
			anim1to2();
		});
		
		$('#button2to1').click(function(){
			anim2to1();
		});
		
		if(num>2){
			$('#button2to3').click(function(){
				anim2to3();
			});
			
			$('#button3to2').click(function(){
				anim3to2();
			});
		};
		if(num>3){
			$('#button3to4').click(function(){
				anim3to4();
			});
			
			$('#button4to3').click(function(){
				anim4to3();
			});
			
		};
	};

	$(document).bind('keydown',function(event){ 
		if(event.keyCode == '39' || event.keyCode == '37'){
			event.preventDefault();
		}
		if(event.which=='39' && animDone){
			
			if(wrapperPos==1 && num>1){
				anim1to2();
			};
			if(wrapperPos==2 && num>2){
				anim2to3();
			};
			if(wrapperPos==3 && num>3){
				anim3to4();
			};
		};
		if(event.which=='37' && animDone){
			if(wrapperPos==4){
				anim4to3();
			};	
			if(wrapperPos==3){
				anim3to2();
			};
			if(wrapperPos==2){
				anim2to1();
			};			
		};
	});
    $("#congnghe").click(function(){
        anim1to2();
    });
    $("#thethao").click(function(){
        anim2to1();
    });
    $("#logo").click(function(){
        anim2to1();
    });
    $("#giaitri").click(function(){
        anim2to3();
    });
    $("#phapluat").click(function(){
        anim3to4();
    });
    function start(){
        var pos =$("#start").attr("name");
        if(pos=="congnghe"){
            anim3to4();
            anim1to2();
        }
        if(pos=="giaitri"){
            anim2to3();
            anim4to3();
        }
        if(pos=="tonghop"){
            anim2to1();
            anim3to4();

        }
    }
    start();
	$(document).mousewheel(function(event, delta) {
		if (delta > 0 && animDone){
			if(wrapperPos==4){
				anim4to3();
			};
			if(wrapperPos==3){
				anim3to2();
			};
			if(wrapperPos==2){
				anim2to1();
			};
		}
		else if (delta < 0 && animDone){
			if(wrapperPos==1 && num>1){
				anim1to2();
			};
			if(wrapperPos==2 && num>2){
				anim2to3();
			};
			if(wrapperPos==3 && num>3){
				anim3to4();
			};
		};
		event.preventDefault();
	});
	if(num<4){
		$('#name4').detach();
		$('#wrapper4').detach();
		$('#button3to4').detach();
		$('#button4to3').detach();
	};


	if(num<3){
		$('#name3').detach();
		$('#wrapper3').detach();
		$('#button2to3').detach();
		$('#button3to2').detach();
	};
	

	if(num<2){
		$('#name2').detach();
		$('#wrapper2').detach();
		$('#button1to2').detach();
		$('#button2to1').detach();
	};
});

